<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta charset='utf-8' />
    <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
    <title>谷歌地图显示</title>
    <!--引入第三方的jquery脚本库-->
    <script include="jquery,bootstrap" src="./static/libs/include-lib-local.js"></script>
    <script src="./static/libs/include-mapboxgl-local.js"></script>
    <!--引入当前页面样式表-->
    <link href="./static/demo/mapboxgl/example/style.css" rel="stylesheet" type="text/css" />
    <style type='text/css'>
        #map {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .dropdown {
            position: absolute;
            right: 20px;
            top: 10px;
            z-index: 1000;
        }

        .dropdown-menu {
            min-width: 95px;
        }
    </style>
    <script>
        //使用严格模式
        "use strict";
        var map;
        /** 地图初始化
         */
        function init() {
            //实例化要加载的source来源对象（世界矢量地图）
            var dark = {
                "type": "raster",
                'tiles': [
                    //来源请求地址，请求谷歌提供的世界矢量地图瓦片服务
                    "https://api.tiles.mapbox.com/v4/mapbox.dark/{z}/{x}/{y}.png?access_token=sk.eyJ1IjoiY2hlbmdkYWRhIiwiYSI6ImNqZDFjaGo0ZjFzcnoyeG54enoxdnNuZHUifQ.hTWXXBUQ0wdGeuDF3GWeUw"
                ],
                //栅格瓦片的分辨率
                'tileSize': 256
            };
            //实例化Map对象加载地图
            map = new mapboxgl.Map({
                //地图容器div的id
                container: 'map',
                //设置地图样式信息
                style: {
                    //设置版本号，一定要设置
                    "version": 8,
                    //添加来源
                    "sources": {
                        "dark": dark
                    },
                    //设置加载并显示来源的图层信息
                    "layers": [
                        {
                            //图层id，要保证唯一性
                            "id": "dark",
                            //图层类型
                            "type": "raster",
                            //连接图层来源
                            "source": "dark",
                            //图层最小缩放级数
                            "minzoom": 0,
                            //图层最大缩放级数
                            "maxzoom": 22
                        }
                    ]
                }

            });
            //实例化要加载的source来源对象（世界影像+注记）
            var light = {
                "type": "raster",
                'tiles': [
                    //来源请求地址，请求谷歌提供的世界影像+注记瓦片服务
                    "https://api.tiles.mapbox.com/v4/mapbox.light/{z}/{x}/{y}.png?access_token=sk.eyJ1IjoiY2hlbmdkYWRhIiwiYSI6ImNqZDFjaGo0ZjFzcnoyeG54enoxdnNuZHUifQ.hTWXXBUQ0wdGeuDF3GWeUw"
                ],
                'tileSize': 256
            };
            //实例化要加载的source来源对象（世界地形+矢量+注记）
            var streets = {
                "type": "raster",
                'tiles': [
                    //来源请求地址，请求谷歌提供的世界地形+矢量+注记瓦片服务
                    "https://api.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=sk.eyJ1IjoiY2hlbmdkYWRhIiwiYSI6ImNqZDFjaGo0ZjFzcnoyeG54enoxdnNuZHUifQ.hTWXXBUQ0wdGeuDF3GWeUw"
                ],
                'tileSize': 256
            }
            //注册地图加载事件
            map.on('load', function () {
                //添加来源，方法必须写在地图加载事件的回调函数里
                map.addSource("light", light);
                map.addSource("streets", streets);

            });
            //注册鼠标移动事件
            map.on('mousemove', function (e) {
                //经纬度坐标转web墨卡托
                const earthRad = 6378137.0;
                const x = e.lngLat.lng * Math.PI / 180 * earthRad;
                const a = e.lngLat.lat * Math.PI / 180;
                const y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
                document.getElementById('mouse-position').innerHTML = "X轴：" + x.toFixed(2) + "，Y轴：" + y.toFixed(2);
            });

        }
        /** 图层切换
         */
        function changeLayer(src) {
            //获取地图的所有图层
            var Layers = map.getStyle().layers;
            var layerL = Layers.length;
            for (var i = 0; i < layerL; i++) {
                //移除图层
                map.removeLayer(Layers[i].id);
            }
            //添加图层
            map.addLayer({
                "id": src,
                "type": "raster",
                //连接图层来源
                "source": src,
                "minzoom": 0,
                "maxzoom": 22
            });
        }
    </script>
</head>

<body onload="init()">
    <div class="dropdown">
        <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">
            切换图层
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="javascipt:void(0)" onclick="changeLayer('dark')">Dark</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="javascipt:void(0)" onclick="changeLayer('light')">Light</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="javascipt:void(0)" onclick="changeLayer('streets')">Streets</a>
            </li>
        </ul>
    </div>
    <div id='map'>
        <div id="mouse-position">
        </div>
    </div>
</body>

</html>